<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<!--[if lt IE 9]>
    <script type="text/javascript" src="../../lib/html5shiv.js?rev=@@hash"></script>
    <script type="text/javascript" src="../../lib/respond.min.js?rev=@@hash"></script>
    <![endif]-->
		<link rel="stylesheet" type="text/css" href="../../static/h-ui/css/H-ui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../static/h-ui.admin/css/H-ui.admin.css" />
		<link rel="stylesheet" type="text/css" href="../../lib/Hui-iconfont/1.0.8/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../../static/h-ui.admin/skin/default/skin.css" id="skin" />
		<link rel="stylesheet" type="text/css" href="../../static/h-ui.admin/css/style.css" />
		<link rel="stylesheet" type="text/css" href="../../ht-css/Project.css" />
		<!--[if IE 6]>
    <script type="text/javascript" src="../../lib/DD_belatedPNG_0.0.8a-min.js?rev=@@hash"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
		<link rel="stylesheet" type="text/css" href="../../ht-css/style-q.css" />
		<title></title>
	</head>

	<body>
		<form>
			<div class="cl clearfix pl-20 pt-15">
				<div>选择属性值：（可多选）</div>
				<div>已选：<span id="selectedVal"></span></div>
				<div class="bg-fff pd-10">
					<div>
						<input type="text" autocomplete="off" class="input-text radius f-l mr-20" style="width:200px" name="class1" id="class1" placeholder="根据属性值关键字或首字母检索" onkeyup="this.value=this.value.replace(/\s+/g,'')">
						<ul class="relation radius guanlian" style="top: 95px;" id="classUl1"></ul>
						<input type="button" onclick="goods_listNature()" class="btn radius size-S botter" value="&nbsp;查&nbsp;&nbsp;询&nbsp;">
					</div>
					<ul class="clearfix" style="clear:both" id="attrValueBox">
						<!--<li class="col-5-1 f-l"><input type="checkbox" value=""><span>红色</span></li>-->
					</ul>
				</div>
			</div>

			<div class="text-c pd-20">
				<button onclick="add_submit();" class="btn btn-primary radius" type="button">&nbsp;&nbsp;确认&nbsp;&nbsp;</button>
				<button onclick="addCancel();" class="btn radius ml-20" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
			</div>
		</form>
	</body>
	<script type="text/javascript" src="../../lib/jquery/1.9.1/jquery.min.js?rev=@@hash"></script>
	<script type="text/javascript" src="../../lib/layer/2.4/layer.js?rev=@@hash"></script>
	<script type="text/javascript" src="../../static/h-ui/js/H-ui.min.js?rev=@@hash"></script>
	<script type="text/javascript" src="../../static/h-ui.admin/js/H-ui.admin.js?rev=@@hash"></script>
	<!--/_footer 作为公共模版分离出去-->
	<!--请在下方写此页面业务相关的脚本-->
	<script type="text/javascript" src="../../lib/My97DatePicker/4.8/WdatePicker.js?rev=@@hash"></script>
	<!--表单验证-->
	<script type="text/javascript" src="../../lib/jquery.validation/1.14.0/jquery.validate.js?rev=@@hash"></script>
	<script type="text/javascript" src="../../lib/jquery.validation/1.14.0/validate-methods.js?rev=@@hash"></script>
	<script type="text/javascript" src="../../lib/jquery.validation/1.14.0/messages_zh.js?rev=@@hash"></script>
	<script type="text/javascript" src="../../lib/datatables/1.10.0/jquery.dataTables.min.js?rev=@@hash"></script>
	<script type="text/javascript" src="../../lib/laypage/1.2/laypage.js?rev=@@hash"></script>
	<script src="../../ht-js/public.js?rev=@@hash"></script>
<!--验证token-->
<script src="../../ht-js/verifyToken.js?rev=@@hash"></script>
	<script src="../../ht-js/Project.js?rev=@@hash"></script>
	<script>
		var attrId = sessionStorage.getItem("atrrId");
        // 判断是否选中
        var checkedIds=sessionStorage.getItem("checkedIds");
        var ids= new Array(); //定义一数组
        ids=checkedIds.split(";");
		$.ajax({
			url: root.goodsInter.goods_listAttributeValue,
			cache: false, //禁用缓存
			type: "POST",
			data: {
				attribute_id: attrId
			},
			success: function(data) {
                var isChecked=false;
				for(var i = 0; i < data.data.length; i++) {
					var attrInfo = JSON.stringify({
						attri_value_id: data.data[i].attri_value_id,
						attri_value: data.data[i].attri_value
					});
                    for(var j=0;j<ids.length-1;j++){
                        isChecked=false;
                        if(ids[j]==data.data[i].attri_value_id){
                            isChecked=true;
                            break;
                        }
                    }
                    if(isChecked==true){
                        $("#attrValueBox").append("<li class='col-5-1 f-l'><input onchange='getAttrName(this,"+data.data[i].attri_value_id+")' type='checkbox' checked='checked'  name='attrValue' value='" + attrInfo + "'><span>" + data.data[i].attri_value + "</span></li>");
					}else{
                        $("#attrValueBox").append("<li class='col-5-1 f-l'><input onchange='getAttrName(this,"+data.data[i].attri_value_id+")' type='checkbox'  name='attrValue' value='" + attrInfo + "'><span>" + data.data[i].attri_value + "</span></li>");
					}
				}
                $('input:checkbox[name=attrValue]:checked').trigger("change");
			}
		});
		if(sessionStorage.getItem("attrObjCanch")) {
            var allattrObj = JSON.parse(sessionStorage.getItem("attrObjCanch"));
        } else {
		    /*如果除sku和spu其他页面需要引入此页面,需要在打开页面时setItem(spuOrSkuStatus, 标识)*/
            var status = sessionStorage.getItem("spuOrSkuStatus");
            var spuInfo, allattrObj;
            if(status == 'spu'){
				spuInfo = JSON.parse(sessionStorage.getItem("spuInfo"));
                allattrObj = spuInfo.attribute;
			}
			if(status == 'sku'){
                spuInfo = JSON.parse(sessionStorage.getItem("skuInfo"));
                allattrObj = spuInfo.attrbuteValue;
			}
            sessionStorage.removeItem("spuOrSkuStatus");
		}
		var attrNameObj = null;
        function mergeArray(arr1, arr2){
            for (var i = 0 ; i < arr1.length ; i ++ ){
                for(var j = 0 ; j < arr2.length ; j ++ ){
                    if (arr1[i] === arr2[j]){
                        arr1.splice(i,1); //利用splice函数删除元素，从第i个位置，截取长度为1的元素
                    }
                }
            }
            //alert(arr1.length)
            for(var i = 0; i <arr2.length; i++){
                arr1.push(arr2[i]);
            }
            return arr1;
        }
		function getAttrName(checkboxInp,attrValId) {
            console.log(attrValId)
			var attrNameStr = "";
			var attrNameObj1 = {};
			for(var i = 0; i < $('input:checkbox[name=attrValue]:checked').length; i++) {
				var attrValObj = JSON.parse($('input:checkbox[name=attrValue]:checked')[i].value);
				attrNameObj1[attrValObj.attri_value_id] = attrValObj;
			}
			console.log(attrNameObj1)

			if(attrNameObj == null){
                attrNameObj = attrNameObj1
			}else {
			    console.log(checkboxInp.checked)
				console.log(attrValId)
                attrNameObj = $.extend(attrNameObj, attrNameObj1);
                if(checkboxInp.checked == false){
                    for(var item in attrNameObj) {
                        if(item == attrValId){
                            console.log(item)
                            delete attrNameObj[item];
                        }
                    }
				}

                console.log(attrNameObj)
			}
			for(var i = 0; i < allattrObj.length; i++) {
				if(allattrObj[i].attribute_id == attrId) {
					var attrIndex = i;
				}
			}
			allattrObj[attrIndex].value = [];
			for(var item in attrNameObj) {
				allattrObj[attrIndex].value.push(attrNameObj[item]);
				attrNameStr += attrNameObj[item].attri_value + "; "
			}
			$("#selectedVal").html(attrNameStr);
		}

		function add_submit() {
			console.log(allattrObj);
			sessionStorage.setItem("attrObjCanch", JSON.stringify(allattrObj));
			//调取父级页面属性渲染函数
            window.parent.addAttrName();
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
		}

		function addCancel() {
			var index = parent.layer.getFrameIndex(window.name);
			parent.layer.close(index);
		}

		/*属性模糊搜索*/
		function goods_listNature() {
			var user_data = {
				"attrVaName": $("#class1").val(),
				"attributeId": attrId
			}
			var succCallBack = function(data, status, response) {
				if(data.errorCode == "0") {
					if(data.data == []) {
						classStr = "<li>无数据</li>"
                        $("#attrValueBox").html(classStr);
                        // $("#classUl1").show();
					} else {
                        $("#attrValueBox").html("")
                        var isChecked=false;

                        if(attrNameObj == {}){
                            for(var i = 0; i < data.data.length; i++) {
                                var attrInfo = JSON.stringify({
                                    attri_value_id: data.data[i].attri_value_id,
                                    attri_value: data.data[i].attri_value
                                });
                                for(var j=0;j<ids.length-1;j++){
                                    isChecked=false;
                                    if(ids[j]==data.data[i].attri_value_id){
                                        isChecked=true;
                                        break;
                                    }
                                }

                                if(isChecked==true){
                                    $("#attrValueBox").append("<li class='col-5-1 f-l'><input onchange='getAttrName(this,"+data.data[i].attri_value_id+")' type='checkbox' checked='checked'  name='attrValue' value='" + attrInfo + "'><span>" + data.data[i].attri_value + "</span></li>");
                                }else{
                                    $("#attrValueBox").append("<li class='col-5-1 f-l'><input onchange='getAttrName(this,"+data.data[i].attri_value_id+")' type='checkbox'  name='attrValue' value='" + attrInfo + "'><span>" + data.data[i].attri_value + "</span></li>");
                                }
                            }
                        }else{
                            for(var i = 0; i < data.data.length; i++) {
                                var attrInfo = JSON.stringify({
                                    attri_value_id: data.data[i].attri_value_id,
                                    attri_value: data.data[i].attri_value
                                });
                                for(item in attrNameObj){
                                    isChecked=false;
                                    if(attrNameObj[item].attri_value_id==data.data[i].attri_value_id){
                                        isChecked=true;
                                        break;
                                    }
                                }

                                if(isChecked==true){
                                    $("#attrValueBox").append("<li class='col-5-1 f-l'><input onchange='getAttrName(this,"+data.data[i].attri_value_id+")' type='checkbox' checked='checked'  name='attrValue' value='" + attrInfo + "'><span>" + data.data[i].attri_value + "</span></li>");
                                }else{
                                    $("#attrValueBox").append("<li class='col-5-1 f-l'><input onchange='getAttrName(this,"+data.data[i].attri_value_id+")' type='checkbox'  name='attrValue' value='" + attrInfo + "'><span>" + data.data[i].attri_value + "</span></li>");
                                }
                            }
                        }
                        $('input:checkbox[name=attrValue]:checked').trigger("change");
						// var classStr = "";
						// for(var i = 0; i < data.data.length; i++) {
						// 	classStr += "<li onclick='selectThisVal("+data.data[i].attri_value_id+",\""+data.data[i].attri_value+"\")'>" + data.data[i].attri_value + "</li>"
						// }
						// $("#classUl1").html(classStr);
						// $("#classUl1").show();
					}
				}
			}
			web.doAjax(root.goodsInter.goods_getListAttriValue, 'post', user_data, succCallBack);
		}

		//获取光标
		// $("#class1").focus(function() {
		// 	$("#classUl1").show();
		// 	goods_listNature();
		// });
        // $("#class1")[0].oninput = function() {
         //    goods_listNature();
		// }
		// $(document).bind("click", function(e) {
		// 	//id为menu的是菜单，id为open的是打开菜单的按钮
		// 	if($(e.target).closest("#classUl1").length == 0 && $(e.target).closest("#class1").length == 0) {
		// 		//点击id为menu之外且id不是不是open，则触发
		// 		$("#classUl1").hide()
		// 		$("#class2").val();
        //
		// 	}
		// });
		/*选中查询的属性值*/
		function selectThisVal(id,val) {
            attrNameObj[id] = {
                attri_value_id:id,
                attri_value:val,
			}
			/*点击查询出的数据后复选框反显*/
			for (var i=0;i<$("#attrValueBox").find("li").find("span").length;i++){
               if($("#attrValueBox").find("li").find("span")[i].innerHTML == val){
                   $("#attrValueBox").find("li").find("span")[i].previousElementSibling.checked = "checked"
			   }
			}
			/*添加缓存并在已选中显示*/
			var attrNameStr = "";
            for(var i = 0; i < allattrObj.length; i++) {
                if(allattrObj[i].attribute_id == attrId) {
                    var attrIndex = i;
                }
            }
            allattrObj[attrIndex].value = [];
            for(var item in attrNameObj) {
                allattrObj[attrIndex].value.push(attrNameObj[item]);
                attrNameStr += attrNameObj[item].attri_value + "; "
            }
            $("#selectedVal").html(attrNameStr);
        }
	</script>
</html>